<script lang="ts" setup>
import {computed, onMounted, ref, watch} from 'vue';
import { ElMessage } from 'element-plus'; // 可选，用于显示消息
import {User} from "@element-plus/icons-vue";
import * as Api from '@/api/homework'
const search = ref('')
import { defineProps } from 'vue';
import { defineExpose } from 'vue';
// 定义接收的 props
const props = defineProps({
  tableDataTwo: {
    type: Array,
    required: true
  },
  homeworkId: {
    type: Number, // 指定prop的类型，这里假设是Number类型
    required: true // 指定这个prop是必需的
  },
  tableDataOne: {
    type: Array,
    default: () => []
  }
});

onMounted(async () => {
  await fetchScore();
})
const tableData = ref([]);

// 暴露给父组件的方法
const updateData = (newData) => {
  tableData.value = [...newData];
};
const searchQuery = ref('');
// 计算属性，用于过滤数据
const filteredData = computed(() => {
  if (!searchQuery.value) {
    return props.tableDataTwo; // 如果没有搜索查询，返回所有数据
  }
  const lowerCaseQuery = searchQuery.value.toLowerCase();
  return props.tableDataTwo.filter(item => {
    // 在这里添加您的搜索逻辑，例如检查 id、name 或 score 是否包含搜索查询
    return item.id.toString().includes(lowerCaseQuery) ||
        item.name.toLowerCase().includes(lowerCaseQuery) ||
        (item.score !== undefined && item.score.toString().includes(lowerCaseQuery));
  });
});
// 可选：使用 watch 来观察 searchQuery 的变化，并显示搜索结果的消息（仅用于演示）
watch(searchQuery, (newVal, oldVal) => {
  if (newVal !== oldVal && newVal.trim() !== '') {
    ElMessage.info(`搜索到 ${filteredData.value.length} 个结果`);
  }
});
const getScore =async (id)=>{
  await Api.score({
    "stuId": id,
    "homeworkId": props.homeworkId
  })
}
const fetchScore = async () => {
  for (const item of props.tableDataTwo) {
    try {
      const completedCount = await getScore(Number(item.id)); // 等待并获取完成人数
      console.log(completedCount)
      if (completedCount !== null) {
        item.completedCount = completedCount; // 更新item的completedCount属性
      } else {
        item.completedCount = '加载中...'; // 或者设置为其他默认值，表示加载失败或未获取到数据
      }
    } catch (error) {
      console.error('Error updating completed count for item ID:', item.id, error);
      item.completedCount = '加载中...'; // 或者设置为错误提示信息
    }
  }
};
defineExpose({
  fetchScore,
  updateData
});
</script>

<template>
  <h3 style="margin-bottom: 20px"> 题目分析：</h3>
  <el-table :data="tableDataOne"  border height="250"  stripe style="width: 100%">
    <el-table-column prop="date" label="题号" width="180" />
    <el-table-column prop="peo" label="答对人数" width="180" />
    <el-table-column prop="right" label="正确率"  />
  </el-table>
 <h3 style="margin-top: 30px"> 作业排名：</h3>
  <el-table :data="filteredData" stripe border style="width: 100%; margin-top: 20px; height: 420px">
    <el-table-column label="排名" type="index" width="80" />
    <el-table-column label="学号" prop="id" />
    <el-table-column label="姓名" prop="name" />
    <el-table-column label="成绩" prop="score">
      <template v-slot="scope">
        <span v-if="scope.row.score === null">还未开始</span>
        <span v-else>{{ scope.row.score }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<style >

</style>